<template>
  <div class="community_project">
    <!-- 左 -->
    <div class="community_left">
      <!-- 头部导航 -->
      <div class="aaa">
        <div class="navbar" v-for="i in navbars" :key="i.id">
          {{ i.name }}
        </div>
      </div>

      <!-- 社区动态 -->
      <div
        class="community_bottom"
        v-infinite-scroll="load"
        infinite-scroll-distance="10"
      >
        <div v-for="item in contents" :key="item.id" class="own_blog">
          <span class="own_blog_title" @click="To_Detail_page(item.id)">{{
            item.title
          }}</span>
          <div class="own_blog_connent">
            <img
              class="own_blog_img"
              @click="To_Detail_page(item.id)"
              :src="item.coverPicture"
              alt=""
            />
            <div class="own_blog_right">
              <span
                class="own_blog_description"
                style="cursor: pointer"
                @click="To_Detail_page(item.id)"
                >{{ item.description }}</span
              >
              <div class="own_blog_function">
                <span
                  class="own_blog_praise el-icon-thumb"
                  :class="{ praise: item.hasLike }"
                >
                  {{ item.praiseNumber }}</span
                >
                <span class="own_blog_comment el-icon-chat-dot-round">
                  {{ item.commentNumber }}</span
                >
              </div>
            </div>
          </div>
        </div>
        <p v-if="page > page_count" style="margin: 0px auto">没有更多了</p>
      </div>
    </div>

    <!-- 右 -->
    <div class="community_right">
      <div class="search_top">
        <el-input
          class="search_button"
          placeholder="请输入关键字"
          v-model="change"
          @keyup.enter.native="Project_onSearch"
        >
          <i
            slot="suffix"
            class="el-icon-search"
            @click="Project_onSearch"
            v-if="change_state"
          ></i>
          <i
            slot="suffix"
            style="cursor: pointer; color: blue"
            class="el-icon-close el-input__icon"
            @click="Project_closeSearch"
            v-else
          ></i>
        </el-input>
        <i
          slot="suffix"
          class="el-icon-edit-outline"
          @click="Release_the_dynamic"
        ></i>
        <span class="lishi" @click="To_history_content">历史动态</span>
      </div>

      <div class="top_list">
        <header class="t-header">
          <span class="t-h-name">热度榜</span>
          <i class="el-icon-view"></i>
        </header>
        <div v-for="(item, index) in Lists" :key="index" class="top_list_item">
          <a @click="To_Detail_page(item.id)">
            <i
              class="t-i-number"
              v-bind:class="[
                index + 1 == '1'
                  ? 'index_one'
                  : index + 1 == '2'
                  ? 'index_two'
                  : index + 1 == '3'
                  ? 'index_three'
                  : '',
              ]"
              >{{ index + 1 }}</i
            >
            <div class="t-i-title">
              <span>{{ item.title }}</span>
              <span class="sum">{{ item.viewNumber }}</span>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
  <!-- 内容区域 -->
</template>

<script>
export default {
  props: {},
  components: {},
  data() {
    return {
      page: 1,
      page_count: 12,
      change: "",
      change_state: true,
      contents: [],
      navbars: [],
      Lists: [],
      flag: "",
    };
  },
  methods: {
    load() {
      this.page += 1;
      if (this.page <= this.page_count) {
        this.get_dynamic();
      }
    },
    //历史动态
    To_history_content() {
      this.$router.push("/home/Team/Team_Incubation_community/history");
    },
    //到详细页面
    To_Detail_page(id) {
      window.sessionStorage.setItem("article_id", id);
      this.$router.push("/home/Team/Team_Incubation_community/Blog_details");
      window.sessionStorage.setItem("blog_name", "孵化社区");
    },
    //到历史记录去
    to_history() {
      this.$router.push("/home/Team/Team_Incubation_community/history");
    },
    //发布动态
    Release_the_dynamic() {
      console.log("点击发布动态");
      this.$router.push("/home/Team/Team_Incubation_community/publish");
    },
    //搜索
    Project_onSearch() {
      // console.log("搜索");
      this.change_state = false;
      this.page = 1;
      this.contents = [];
      this.get_dynamic();
    },
    Project_closeSearch() {
      this.change_state = true;
      this.change = "";
      this.page = 1;
      this.contents = [];
      this.get_dynamic();
    },

    //获取所有文章类型
    async get_articleType() {
      // const count = 0;
      // if(this.)
      const { data: res } = await this.$http({
        headers: { "Content-Type": "application/json;charset=UTF-8" },
        method: "get",
        url: "api/team/article/getArticleType",
      });
      this.navbars = res.msg;
      console.log(this.navbars);
    },

    //获取所有文章信息
    handleCurrentChange(newSize) {
      this.page = newSize;
      this.get_dynamic();
    },
    async get_dynamic() {
      const self = this;
      const { data: res } = await this.$http({
        headers: { "Content-Type": "application/json;charset=UTF-8" },
        method: "get",
        url: "api/team/article/getArticlesByTitle",
        params: {
          page: self.page,
          pageSize: 6,
          title: self.change,
        },
      });
      this.page_count = res.msg.pages;
      // this.contents = res.msg.records;

      this.contents = this.contents.concat(res.msg.records);
    },

    //获取热度榜单的信息
    async get_lists() {
      const { data: res } = await this.$http({
        headers: { "Content-Type": "application/json;charset=UTF-8" },
        method: "get",
        url: "api/team/article/getArticleTop",
      });
      console.log(res);
      this.Lists = res.msg;
    },
    //排行榜排序
    getRankCls(index) {
      if (index <= 2) {
        return `icon icon${index}`;
      } else {
        return "text";
      }
    },
    getRankText(index) {
      if (index > 2) {
        return index + 1;
      }
    },
  },

  created() {
    this.get_dynamic();
    this.get_articleType();
    this.get_lists();
  },
};
</script>

<style lang="less" scoped >
.community_project {
  height: 98%;
  width: 100%;
  // margin: 10px;
  display: flex;
  flex-direction: row;
  // overflow: auto;
  justify-content: space-between;
  .community_left {
    display: flex;
    flex-direction: column;
    width: 75%;
    .aaa {
      display: flex;
      flex-direction: row;
      word-wrap: break-word;
      word-break: break-all;
      width: 100%;
    }
    .navbar {
      display: flex;
      flex-direction: row;
      width: 10%;
      background-color: #fff;
      color: #333;
      text-align: center;
      line-height: 60px;
      font-size: 20px;
      font-weight: bold;
      // letter-spacing: 1px;
    }
    .community_bottom {
      width: 100%;
      height: 100%;
      background-color: #fff;
      color: #333;
      display: flex;
      overflow-y: auto;
      overflow-x: hidden;
      flex-direction: column;
      // overflow: hidden;
      //每一条动态
      .own_blog {
        margin: 10px 0 0 20px;
        display: flex;
        flex-direction: column;
        width: 98%;
        height: 20%;
        justify-content: flex-start;
        border-bottom: 1px solid rgb(214, 214, 214);
        .own_blog_connent {
          display: flex;
          margin-top: 10px;
          height: 80%;
          width: 100%;
          .own_blog_img {
            height: 80%;
            cursor: pointer;
          }
        }

        .head_title {
          font-size: 25px;
          color: rgb(51, 51, 51);
          font-family: "Microsoft YaHei";
          // font-weight: bold;
          // height: 25%;
          cursor: pointer;
          margin-left: 20px;
        }

        .description {
          display: flex;
          // font-size: 5px;
          height: 20px;
          line-height: 20px;
          flex-direction: column;
          margin-left: 20px;
          letter-spacing: 2px;
          // line-height:25px;
          .icon {
            position: absolute;
            flex-direction: row;
            bottom: 0;
            img {
              height: 25px;
              width: 25px;
              // border-style: solid;
            }
          }
        }
      }
      .Repair_history_page {
        height: 3%;
        width: 3%;
        display: flex;
        justify-content: flex-end;
        margin: 0px 20px 00px 0px;
      }
    }
    .community_bottom::-webkit-scrollbar-thumb {
      border-radius: 3px;
      background: #fff;
    }
    .community_bottom::-webkit-scrollbar {
      width: 6px;
    }
    .community_bottom:hover::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.2);
    }
  }
  .community_right {
    height: 100%;
    width: 25%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-top: 1%;
    .search_top {
      display: flex;
      width: 95%;
      justify-content: space-between;
      // background-color: rgb(148, 37, 37);
      margin-left: 15px;
      .el-input__inner {
        border-radius: 15% !important;
      }
    }
    .el-icon-edit-outline {
      font-size: 40px;
      // height: 40px;
      width: 42px;
      cursor: pointer;
      // background-color: rgb(94, 78, 78);
      // box-shadow: -1px 1px 50px 3px #F2F2F2 inset;
      border-radius: 50%;
      margin-left: 20px;
    }
    .el-icon-search {
      color: blue;
      cursor: pointer;
      margin-top: 90%;
    }
    .Match_query_down {
      // background-color: rgb(121, 14, 14);
      height: 40px;
      width: 97%;
      display: flex;
      justify-content: end;
    }
    .top_list {
      width: 100%;
      padding: 0 10px 0 20px;
    }
    .t-header {
      // display: flex;
      justify-content: space-between;
      padding: 10px;
      .t-h-name {
        font-size: 30px;
        font-weight: bold;
      }
      .el-icon-view {
        font-size: 20px;
        color: #73e7cf;
        // float: right;
        margin-top: 10px;
      }
    }

    .top_list_item {
      justify-content: space-around;
      width: 100%;
      padding: 8px;
      overflow: hidden;
      // margin: 20px;
      line-height: 40px;
      .t-i-number {
        display: inline-block;
        width: 10%;
        height: 20px;
        margin-right: 5%;
        font-size: 14px;
        color: #999;
        text-align: center;
        font-size: 20px;
      }

      .index_one {
        color: #fec412;
        font-weight: bold;
        // background-image: url(../../../assets/icon/record.png);
      }
      .index_two {
        font-weight: bold;
        color: #b4c0c7;
        // background-image: url(../../../assets/icon/record.png);
      }
      .index_three {
        font-weight: bold;
        color: #714e3a;
        // background-image: url(../../../assets/icon/record.png);
      }

      .t-i-title {
        display: inline-block;
        width: 70%;
        font-size: 18px;
        /* 垂直对齐  父级要变*/
        vertical-align: middle;
      }
      .sum {
        float: right;
      }
    }
  }
  .lishi {
    display: flex;
    border-radius: 5%;
    cursor: pointer;
    margin-left: 10px;
  }
  .el-icon-search el-input__icon {
    height: 20px;
    margin: 0;
  }
  .blog_imgP {
    height: 80%;
    cursor: pointer;
  }
  .own_blog {
    margin: 10px 0 0 20px;
    display: flex;
    flex-direction: column;
    width: 98%;
    height: 20%;
    justify-content: flex-start;
    border-bottom: 1px solid rgb(214, 214, 214);
    //  background-color: rgb(202, 22, 22);

    .own_blog_title {
      font-size: 25px;
      // height: 10%;
      // display: flex;
      cursor: pointer;
    }
    .own_blog_connent {
      display: flex;
      margin-top: 10px;
      height: 80%;
      width: 100%;
      .own_blog_img {
        height: 80%;
        cursor: pointer;
      }

      .own_blog_right {
        margin-left: 15px;
        display: flex;
        flex-direction: column;
        height: 80%;
        justify-content: space-between;
        .own_blog_function {
          display: flex;
          flex-direction: row;
          span {
            margin-right: 20px;
          }
          .own_blog_comment .own_blog_praise {
            font-size: 10px;
          }
        }
      }
    }
  }
}
.praise {
  color: red;
}
</style>